<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电光云 - 高性能计算云平台</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/trial-form.css">
  <link rel="stylesheet" href="css/typography.css">
  <link rel="stylesheet" href="css/mobile-nav.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <script src="js/banner.js" defer></script>
  <script src="js/mobile-nav.js" defer></script>
  <script defer src="https://cloud.umami.is/script.js" data-website-id="73aa0aaa-5134-451a-a45c-eb4d3bc692bb"></script>
</head>
<body>

  <!-- Banner -->
  <section class="banner">
    <div class="banner-slider">
      <!-- 左右箭头 -->
      <button class="banner-prev"><i class="fas fa-chevron-left"></i></button>
      <button class="banner-next"><i class="fas fa-chevron-right"></i></button>
      <!-- 指示器 -->
      <div class="banner-indicators"></div>
      <div class="banner-slide active" style="background-image: url('https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');">
        <div class="banner-overlay"></div>
        <div class="banner-content">
          <h1>AI智能计算平台</h1>
          <p>融合先进AI技术与高性能计算，赋能企业数字化转型</p>
          <a href="pages/product1.html" class="btn btn-white">了解更多</a>
        </div>
      </div>
      <div class="banner-slide" style="background-image: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');">
        <div class="banner-overlay"></div>
        <div class="banner-content">
          <h1>大数据分析平台</h1>
          <p>高效处理海量数据，挖掘数据价值，驱动业务增长</p>
          <a href="pages/product2.html" class="btn btn-white">了解更多</a>
        </div>
      </div>
      <div class="banner-slide" style="background-image: url('https://images.unsplash.com/photo-1504639725590-34d0984388bd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');">
        <div class="banner-overlay"></div>
        <div class="banner-content">
          <h1>科学计算云平台</h1>
          <p>为科研机构提供强大的计算能力，加速科研创新</p>
          <a href="pages/product3.html" class="btn btn-white">了解更多</a>
        </div>
      </div>
      <div class="banner-slide" style="background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');">
        <div class="banner-overlay"></div>
        <div class="banner-content">
          <h1>工业仿真平台</h1>
          <p>高精度工业仿真，优化产品设计，降低研发成本</p>
          <a href="pages/product4.html" class="btn btn-white">了解更多</a>
        </div>
      </div>
    
    </div>
  </section>

  <!-- 核心数据展示 -->
  <section class="core-data">
    <div class="container">
      <div class="data-cards">
        <div class="data-card">
          <div class="data-number">200,000</div>
          <div class="data-label">通用CPU物理核心数</div>
          <h3>超算资源</h3>
          <p>内蒙古、浙江等地区建设通用CPU超算集群，提供7*24小时不间断业务服务模式</p>
        </div>
        <div class="data-card">
          <div class="data-number">10,000+</div>
          <div class="data-label">通用GPU物理卡数</div>
          <h3>智算资源</h3>
          <p>通过与政府合作共建超万卡的通用AI算力平台，构筑难以复制的核心竞争优势。</p>
        </div>
        <div class="data-card">
          <div class="data-number">100%</div>
          <div class="data-label">自主可控仿真应用</div>
          <h3>CAE自研仿真应用</h3>
          <p>研发具有完全自主知识产权的CAE仿真软件，实现国外商业软件的国产化替代。</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 产品与服务 -->
  <section class="products">
    <div class="container">
      <h2>产品与服务</h2>
      <div class="products-grid">
        <a href="pages/product1.html" class="product-card-link">
          <div class="product-card">
            <div class="product-icon">
              <i class="fas fa-microchip"></i>
            </div>
            <div class="product-content">
              <h3>超算云算力服务产品</h3>
            </div>
          </div>
        </a>
        <a href="pages/product2.html" class="product-card-link">
          <div class="product-card">
            <div class="product-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <div class="product-content">
              <h3>算力产品定制化业务</h3>
            </div>
          </div>
        </a>
        <a href="pages/product3.html" class="product-card-link">
          <div class="product-card">
            <div class="product-icon">
              <i class="fas fa-brain"></i>
            </div>
            <div class="product-content">
              <h3>算力运营服务</h3>
            </div>
          </div>
        </a>
        <a href="pages/product4.html" class="product-card-link">
          <div class="product-card">
            <div class="product-icon">
              <i class="fas fa-project-diagram"></i>
            </div>
            <div class="product-content">
              <h3>自主可控CAE仿真应用</h3>
            </div>
          </div>
        </a>
      </div>
    </div>
  </section>

  <style>
    .products-grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }
    
    .product-card-link {
      display: block;
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .product-card-link:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .product-card {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 60px 30px;
      background-color: #fff;
      border-radius: 12px;
      border: 1px solid #eaeaea;
      transition: all 0.3s ease;
    }
    
    .product-icon {
      font-size: 5rem;
      margin-bottom: 30px;
      color: var(--primary-color);
    }
    
    .product-content h3 {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 700;
      color: #333;
    }
    
    @media (max-width: 768px) {
      .products-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
      
      .product-card {
        padding: 40px 20px;
      }
      
      .product-icon {
        font-size: 3.5rem;
        margin-bottom: 20px;
      }
      
      .product-content h3 {
        font-size: 1.2rem;
      }
    }
    
    @media (max-width: 480px) {
      .products-grid {
        grid-template-columns: 1fr;
      }
      
      .product-icon {
        font-size: 3rem;
      }
    }
  </style>

  <!-- 新闻列表 -->
  <section class="news-section">
    <div class="container">
      <a href="pages/news.html" style="text-decoration: none;"><h2>新闻资讯</h2></a>
      <div class="news-grid">
        <div class="news-card">
          <div class="news-image">
            <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="新闻图片">
          </div>
          <div class="news-content">
            <div class="news-date">2023-09-15</div>
            <h3>电光云发布新一代AI计算平台，助力企业智能化转型</h3>
            <p>近日，电光云正式发布新一代AI计算平台，该平台集成了最新的深度学习框架和优化算法，为企业提供全方位的AI解决方案...</p>
            <a href="pages/news-detail.html" class="news-link">阅读全文 <i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
        <div class="news-card">
          <div class="news-image">
            <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="新闻图片">
          </div>
          <div class="news-content">
            <div class="news-date">2023-08-28</div>
            <h3>电光云与多家高校达成战略合作，共同推进科研计算创新</h3>
            <p>电光云宣布与国内多所知名高校达成战略合作协议，将为高校提供高性能计算资源和技术支持，共同推进前沿科学研究...</p>
            <a href="pages/news-detail.html" class="news-link">阅读全文 <i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
        <div class="news-card">
          <div class="news-image">
            <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="新闻图片">
          </div>
          <div class="news-content">
            <div class="news-date">2023-08-10</div>
            <h3>电光云完成B轮融资，估值突破10亿元</h3>
            <p>电光云宣布完成B轮融资，本轮融资由XX资本领投，XX投资跟投，融资总额达2亿元，公司估值突破10亿元...</p>
            <a href="pages/news-detail.html" class="news-link">阅读全文 <i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 成功案例 -->
  <section class="success-cases">
    <div class="container">
      <h2>成功案例</h2>
      <div class="accordion-container">
        <!-- 案例1 -->
        <div class="accordion-item active">
          <div class="accordion-header">
              <h3><span style="background-color: purple; color: white; padding: 3px 10px; border-radius: 3px; margin-right: 10px; font-size: 14px;">典型案例</span>商业航天"隐形冠军"火箭发动机</h3>
              <i class="fas fa-chevron-right"></i>
            </div>
          <div class="accordion-content">
            <div class="content-wrapper">
              <div class="text-content">
                <p>某家集液体火箭发动机设计研发、装配测试、配套飞行全流程服务为一体的国家高新技术企业。</p>
                <h5>复杂系统模拟</h5>
                <p>HPC可以运行高精度的数值模拟，预测发动机在不同工作条件下的性能，优化设计。</p>
                <div class="features-grid">
                  <div class="feature-item">
                    <h6>流体力学分析</h6>
                    <p>HPC能够进行详细的流体动力学模拟。包括燃烧室内的燃烧过程、喷嘴的流动特性，以及推进剂在泵和管道中的流动情况。</p>
                  </div>
                  <div class="feature-item">
                    <h6>结构应力分析</h6>
                    <p>HPC可用于计算发动机结构在发射过程中的应力分布，预测可能的疲劳寿命和故障模式，从而指导材料选择和结构设计。</p>
                  </div>
                  <div class="feature-item">
                    <h6>热力学优化</h6>
                    <p>HPC可以帮助分析热力学特性，优化冷却系统设计，确保发动机在极端条件下的可靠性和寿命。</p>
                  </div>
                  <div class="feature-item">
                    <h6>燃烧过程优化</h6>
                    <p>HPC可以模拟燃烧过程，帮助研究人员优化燃料和氧化剂的混合比，提高燃烧效率并减少污染排放。</p>
                  </div>
                  <div class="feature-item">
                    <h6>多物理场耦合</h6>
                    <p>多种物理场的相互作用，如流固耦合、热传导、化学反应等。HPC能够提供更全面的设计分析。</p>
                  </div>
                </div>
                <div class="analysis-section">
                  <h5>数据分析和机器学习</h5>
                  <p>HPC生成的海量数据可以通过数据分析和机器学习技术进行处理，以提取有价值的信息，进一步优化设计。</p>
                </div>
              </div>
              <div class="image-content" style="display: flex; flex-direction: column; gap: 15px; width: 100%;">
                <!-- 右侧上方图片 -->
                <div class="top-image">
                  <img src="static/image/case/case1-r-top.png" alt="商业航天火箭发动机上方图片" class="case-image" style="width: 100%;">
                </div>
                
                <!-- 右侧下方两张图片 -->
                <div class="bottom-images" style="display: flex; gap: 10px; width: 100%;">
                  <!-- 右侧下方左侧图片 -->
                  <div class="bottom-left-image" style="flex: 1; display: flex; flex-direction: column; gap: 5px;">
                    <img src="static/image/case/case1-r-b-l.png" alt="液体发动机图片" class="case-image" style="width: 100%; height: 200px; object-fit: cover;">
                    <div class="image-caption" style="text-align: center;">液体发动机</div>
                  </div>
                  
                  <!-- 右侧下方右侧图片 -->
                  <div class="bottom-right-image" style="flex: 1; display: flex; flex-direction: column; gap: 5px;">
                    <img src="static/image/case/case1-r-b-r.png" alt="液氧甲烷发动机图片" class="case-image" style="width: 100%; height: 200px; object-fit: cover;">
                    <div class="image-caption" style="text-align: center;">液氧甲烷发动机</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 案例2 -->
        <div class="accordion-item">
          <div class="accordion-header">
              <h3><span style="background-color: purple; color: white; padding: 3px 10px; border-radius: 3px; margin-right: 10px; font-size: 14px;">典型案例</span>商业航天国产应用超算中心建设</h3>
              <i class="fas fa-chevron-right"></i>
            </div>
          <div class="accordion-content">
            <div class="content-wrapper" style="display: flex; gap: 20px;">
              <div class="text-content" style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
                <div>

                  <h5>拟建HPC集群描述</h5>
                  <p>该单位HPC超算拟采用第4代AMD EPYC 9654（2.4GHz，96核心）、第2代AMD Rome 7H12（2.6GHz，64核心）构建核心算力资源，共计千核物理核心。</p>
                </div>
                <div class="image-content">
                  <img src="static/image/case/case2-l.png" alt="HPC集群描述左侧图片" class="case-image">
                </div>
              </div>
              <div class="image-content" style="flex: 1; display: flex; align-items: center;">
                <img src="static/image/case/case2-r.png" alt="HPC集群描述右侧图片" class="case-image" style="max-height: 500px; object-fit: contain;">
              </div>
            </div>
          </div>
        </div>

        <!-- 案例3 -->
        <div class="accordion-item">
          <div class="accordion-header">
              <h3><span style="background-color: purple; color: white; padding: 3px 10px; border-radius: 3px; margin-right: 10px; font-size: 14px;">典型案例</span>某算力中心10万核超算建设</h3>
              <i class="fas fa-chevron-right"></i>
            </div>
          <div class="accordion-content">
            <div class="content-wrapper" style="display: flex; gap: 30px;">
              <div class="text-content">
                <div class="project-phases">
                  <div class="phase">
                    <h5>一期项目（8W+）</h5>
                    <p>一期超算中心上线，为国内首个采用AMD 7H12 双芯 128 核高性能服务器的商业超算中心。一期建设80512核CPU，峰值算力达3.19PFlops。项目历时40余天完成机房改造、设备上线，同年在HPC TOP100榜单中HPC通用算力居浙江省第一名。</p>
                  </div>
                  <div class="phase">
                    <h5>二期项目（2W+）</h5>
                    <p>二期超算中心陆续上线，为国内商业航天客户提供软硬件结合的定制一体化算力服务平台；经测试，在气动领域计算任务中，可提升2-4倍作业效率。</p>
                  </div>
                </div>
              </div>
              <div class="image-content" style="height: 450px; display: flex; align-items: center;">
                <img src="static/image/case/case3-r.png" alt="案例3图片" class="case-image" style="height: 100%; object-fit: cover; width: 100%;">
              </div>
            </div>
          </div>
        </div>

        <!-- 案例4 -->
        <div class="accordion-item">
          <div class="accordion-header">
              <h3><span style="background-color: purple; color: white; padding: 3px 10px; border-radius: 3px; margin-right: 10px; font-size: 14px;">典型案例</span>某算力中H100智算建设</h3>
              <i class="fas fa-chevron-right"></i>
            </div>
          <div class="accordion-content">
            <div class="content-wrapper" style="display: flex; gap: 30px;">
              <div class="image-content" style="flex: 0.6;">
                <img src="static/image/case/case4-l.png" alt="案例4图片" class="case-image" style="height: auto; max-height: 100%; object-fit: cover; width: 100%;">
              </div>
              <div class="text-content" style="flex: 0.4;">
                <ul style="list-style-type: none; padding: 0; font-size: 1rem; line-height: 1.6;" class="case-features">
                  <li style="margin-bottom: 25px;">
                    <h5 style="margin-bottom: 10px;">网络系统:</h5>
                    <ul style="list-style-type: disc; margin-left: 20px;">
                      <li>IB计算网络4*400G,1:1收敛，总带宽1.6T;</li>
                      <li>IB存储IB网络200G;</li>
                      <li>业务网络25G，出口带宽2-10G。</li>
                    </ul>
                  </li>
                  <li style="margin-bottom: 25px;">
                    <h5 style="margin-bottom: 10px;">计算系统:</h5>
                    <ul style="list-style-type: disc; margin-left: 20px;">
                      <li>127台H100;</li>
                      <li>4*NDR400G, NVIDIA H100 SXM。</li>
                    </ul>
                  </li>
                  <li style="margin-bottom: 25px;">
                    <h5 style="margin-bottom: 10px;">安全系统:</h5>
                    <ul style="list-style-type: disc; margin-left: 20px;">
                      <li>具备强大的攻击防护能力、网络边界隔离;</li>
                      <li>具备日志分析、内部监控能力</li>
                      <li>符合监管合规要求。</li>
                    </ul>
                  </li>
                  <li>
                    <h5 style="margin-bottom: 10px;">存储系统:</h5>
                    <ul style="list-style-type: disc; margin-left: 20px;">
                      <li>具全闪存分布式并行存储1PB，读写带宽300GB/s;</li>
                      <li>10PB大容量存储，读写带宽达到30GB/s</li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 案例5 -->
        <div class="accordion-item">
          <div class="accordion-header">
              <h3><span style="background-color: #0066cc; color: white; padding: 3px 10px; border-radius: 3px; margin-right: 10px; font-size: 14px;">定制化服务</span>算力资源优化新选择</h3>
              <i class="fas fa-chevron-right"></i>
            </div>
          <div class="accordion-content">
            <div class="content-wrapper" style="display: flex; gap: 30px;">
              <div class="image-content" style="flex: 0.6;">
                <img src="static/image/case/case5-l.png" alt="案例5图片" class="case-image" style="height: auto; max-height: 100%; object-fit: cover; width: 100%;">
              </div>
              <div class="text-content" style="flex: 0.4;">
                <div style="margin-bottom: 30px;">
                  <h5 style="margin-bottom: 15px; background-color: #0066cc; color: white; padding: 8px 15px; border-radius: 5px;">方案优势</h5>
                  <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                    <div style="flex: 1; min-width: 250px; border-right: 1px solid #ddd; padding-right: 15px;">
                      <h6 style="color: #0066cc; margin-bottom: 10px;">降低资金门槛</h6>
                      <ul style="list-style-type: none; padding: 0; font-size: 14px; line-height: 1.6;">
                        <li>硬件成本节约：电力企业无需自行采购昂贵的GPU服务器和算力设备，仅需按需支付租赁费用，大幅降低前期投资。</li>
                        <li>运维成本优化：租赁服务商负责硬件维护、技术更新和电力供应，用户无需承担长期运维支出。</li>
                      </ul>
                    </div>
                    <div style="flex: 1; min-width: 250px; border-right: 1px solid #ddd; padding-right: 15px; padding-left: 15px;">
                      <h6 style="color: #0066cc; margin-bottom: 10px;">灵活应对算力需求</h6>
                      <ul style="list-style-type: none; padding: 0; font-size: 14px; line-height: 1.6;">
                        <li>按需扩展：在高峰期（如设备检修、故障处理）对算力需求激增，智算租赁模式支持快速扩容，确保资源充足。</li>
                        <li>弹性调度：可基于云计算资源弹性调度机制，优化算力分配，提升资源利用率。</li>
                      </ul>
                    </div>
                    <div style="flex: 1; min-width: 250px; padding-left: 15px;">
                      <h6 style="color: #0066cc; margin-bottom: 10px;">技术支持与安全保障</h6>
                      <ul style="list-style-type: none; padding: 0; font-size: 14px; line-height: 1.6;">
                        <li>专业服务保障：提供7×24小时技术支持，确保算力资源稳定运行。</li>
                        <li>数据安全和合规：配备完善的安全措施，满足客户对数据安全和行业合规的严格要求。</li>
                        <li>技术迭代无忧：服务商负责硬件和软件的升级，用户可始终使用最新技术。</li>
                      </ul>
                    </div>
                  </div>
                </div>
                
                <p style="margin-bottom: 20px; font-size: 14px; line-height: 1.8;">智算"以算力租赁方式进行本地化部署"模式其核心在于通过【租赁算力资源】替代传统的【自建算力中心】，但其交付流程与传统自建模式无异，从而实现高效、灵活且低成本的计算服务。</p>
                
                <div>
                  <h5 style="margin-bottom: 15px; background-color: #0066cc; color: white; padding: 8px 15px; border-radius: 5px;">用户收益</h5>
                  <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                    <div style="flex: 1; min-width: 250px; border-right: 1px solid #ddd; padding-right: 15px;">
                      <h6 style="color: #0066cc; margin-bottom: 10px;">经济收益</h6>
                      <ul style="list-style-type: none; padding: 0; font-size: 14px; line-height: 1.6;">
                        <li>成本节约：以租代建模式显著降低了硬件采购、维护和电力消耗成本。</li>
                        <li>资源利用率提升：按需租赁避免了算力资源的闲置浪费，优化了资金使用效率。</li>
                      </ul>
                    </div>
                    <div style="flex: 1; min-width: 250px; border-right: 1px solid #ddd; padding-right: 15px; padding-left: 15px;">
                      <h6 style="color: #0066cc; margin-bottom: 10px;">业务效率提升</h6>
                      <ul style="list-style-type: none; padding: 0; font-size: 14px; line-height: 1.6;">
                        <li>快速响应市场变化：租赁模式支持快速部署算力资源，帮助企业及时应对突发需求。</li>
                        <li>专注核心业务：企业可以将更多精力投入到本质工作的优化和管理中，而非算力资源的维护。</li>
                      </ul>
                    </div>
                    <div style="flex: 1; min-width: 250px; padding-left: 15px;">
                      <h6 style="color: #0066cc; margin-bottom: 10px;">智能化转型加速</h6>
                      <ul style="list-style-type: none; padding: 0; font-size: 14px; line-height: 1.6;">
                        <li>推动数字化进程：大模型在行业的深度应用，能够显著提升设备管理、业务调度和客户服务的智能化水平。</li>
                        <li>创新驱动发展：通过智算集群的支持，企业可以探索更多AI应用场景，提升整体竞争力。</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 转化区域 -->
  <section style="background-color: var(--primary-color); color: white; padding: 60px 0;">
    <div class="container" style="text-align: center;">
      <h2 style="color: white; margin-bottom: 20px;">准备好开始您的计算之旅了吗？</h2>
      <p style="font-size: 16px; margin-bottom: 30px; max-width: 800px; margin-left: auto; margin-right: auto;">立即申请免费试算，体验我们高性能计算云平台的强大能力，专业团队将为您提供全方位支持。</p>
      <div style="display: flex; justify-content: center;">
        <button class="btn btn-white btn-try active" style="font-size: 1.1rem; padding: 12px 30px; background-color: #ffffff; color: var(--primary-color); border: 2px solid #ffffff;"><i class="fas fa-calculator"></i> 免费试算</button>
      </div>
    </div>
  </section>

  <!-- 侧边栏功能已整合到组件中 -->
  <script>
    // 设置基础路径
    window.__BASE_PATH__ = '';
  </script>
  
  <!-- 引入侧边栏组件 -->
  <div id="side-actions-container"></div>
  <script>
    fetch('components/side-actions.html')
      .then(response => response.text())
      .then(html => {
        const container = document.getElementById('side-actions-container');
        if (container) {
          container.innerHTML = html;
        }
      })
      .catch(error => {
        console.error('加载侧边栏组件失败:', error);
      });
  </script>
  
  <!-- 免费试算模态框 -->
  <div class="modal">
    <div class="modal-overlay"></div>
    <div class="modal-content">
      <button class="modal-close"><i class="fas fa-times"></i></button>
      <div class="modal-header">
        <div class="modal-icon">
          <i class="fas fa-calculator"></i>
        </div>
        <h2 class="modal-title">免费试算</h2>
        <p class="modal-subtitle">填写以下信息，获取您的专属计算方案</p>
      </div>
      
      <div class="modal-body">
        <form id="trial-calculation-form" class="trial-form">
          <div class="form-row">
            <div class="form-group">
              <label for="name">姓名</label>
              <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
            </div>
            <div class="form-group">
              <label for="phone">电话</label>
              <input type="tel" id="phone" name="phone" placeholder="请输入您的联系电话" required>
            </div>
          </div>
          
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址" required>
          </div>
          
          <div class="form-group">
            <label for="company">公司名称</label>
            <input type="text" id="company" name="company" placeholder="请输入您的公司名称" required>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label for="industry">所属行业</label>
              <select id="industry" name="industry" required>
                <option value="">请选择行业</option>
                <option value="ai">人工智能</option>
                <option value="bigdata">大数据分析</option>
                <option value="science">科学研究</option>
                <option value="manufacturing">制造业</option>
                <option value="finance">金融服务</option>
                <option value="education">教育科研</option>
                <option value="other">其他行业</option>
              </select>
            </div>
            <div class="form-group">
              <label for="calculation-type">计算类型</label>
              <select id="calculation-type" name="calculation-type" required>
                <option value="">请选择计算类型</option>
                <option value="ai">AI训练/推理</option>
                <option value="simulation">工业仿真</option>
                <option value="rendering">渲染计算</option>
                <option value="scientific">科学计算</option>
                <option value="other">其他计算</option>
              </select>
            </div>
          </div>
          
          <div class="form-group">
            <label for="requirements">计算需求描述</label>
            <textarea id="requirements" name="requirements" rows="4" placeholder="请简要描述您的计算需求，以便我们为您提供更精准的方案"></textarea>
          </div>
          
          <div class="form-group">
            <div class="form-check">
              <input type="checkbox" id="privacy-agree" name="privacy-agree" required>
              <label for="privacy-agree">我已阅读并同意<a href="#" class="privacy-link">《隐私政策》</a>，允许电光云处理我的个人信息用于提供试算服务</label>
            </div>
          </div>
        </form>
      </div>
      
      <div class="modal-footer">
        <button type="submit" form="trial-calculation-form" class="btn btn-primary btn-submit">
          <i class="fas fa-paper-plane"></i> 提交申请
        </button>
      </div>
    </div>
  </div>
  
  <!-- 模态框样式 -->
  <style>
    /* 模态框基础样式 */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
    }
    
    .modal.active {
      display: flex;
    }
    
    .modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(3px);
      animation: fadeIn 0.3s ease;
    }
    
    .modal-content {
      position: relative;
      background-color: white;
      border-radius: 12px;
      width: 100%;
      max-width: 650px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
      animation: slideUp 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    
    /* 模态框头部 */
    .modal-header {
      padding: 30px;
      text-align: center;
      border-bottom: 1px solid #f0f0f0;
      background: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
      color: white;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
    
    .modal-icon {
      width: 80px;
      height: 80px;
      background-color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .modal-icon i {
      font-size: 36px;
      color: #1E88E5;
    }
    
    .modal-title {
      font-size: 28px;
      font-weight: 700;
      margin: 0 0 10px;
    }
    
    .modal-subtitle {
      font-size: 16px;
      opacity: 0.9;
      margin: 0;
    }
    
    /* 关闭按钮 */
    .modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.2);
      border: none;
      border-radius: 50%;
      color: white;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 10;
    }
    
    .modal-close:hover {
      background-color: rgba(255, 255, 255, 0.3);
      transform: rotate(90deg);
    }
    
    /* 模态框主体 */
    .modal-body {
      padding: 30px;
      flex: 1;
    }
    
    /* 表单样式 */
    .trial-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .form-row {
      display: flex;
      gap: 20px;
    }
    
    .form-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .form-group label {
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      transition: all 0.3s ease;
      background-color: white;
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #1E88E5;
      box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
    }
    
    .form-group textarea {
      resize: vertical;
      min-height: 100px;
    }
    
    /* 复选框 */
    .form-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    
    .form-check input[type="checkbox"] {
      margin-top: 4px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    
    .form-check label {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.6;
    }
    
    .privacy-link {
      color: #1E88E5;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    
    .privacy-link:hover {
      color: #1565C0;
      text-decoration: underline;
    }
    
    /* 模态框底部 */
    .modal-footer {
      padding: 20px 30px 30px;
      text-align: center;
      border-top: 1px solid #f0f0f0;
    }
    
    .btn-submit {
      padding: 14px 32px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
    }
    
    .btn-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(30, 136, 229, 0.4);
    }
    
    .btn-submit:active {
      transform: translateY(0);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .modal {
        padding: 10px;
      }
      
      .modal-content {
        max-height: 95vh;
      }
      
      .modal-header,
      .modal-body,
      .modal-footer {
        padding: 20px;
      }
      
      .modal-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
      }
      
      .modal-icon i {
        font-size: 28px;
      }
      
      .modal-title {
        font-size: 24px;
      }
      
      .form-row {
        flex-direction: column;
        gap: 20px;
      }
      
      .btn-submit {
        width: 100%;
      }
    }
  </style>
  
  <!-- 模态框功能脚本 -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取模态框相关元素
      const modal = document.querySelector('.modal');
      const modalOverlay = document.querySelector('.modal-overlay');
      const modalClose = document.querySelector('.modal-close');
      const trialForm = document.getElementById('trial-calculation-form');
      
      // 如果所有元素都存在
      if (modal && modalOverlay && modalClose && trialForm) {
        // 模态框关闭功能
        function closeModal() {
          modal.classList.remove('active');
          document.body.style.overflow = '';
        }
        
        // 关闭按钮点击事件
        modalClose.addEventListener('click', closeModal);
        
        // 点击模态框外部关闭
        modalOverlay.addEventListener('click', closeModal);
        
        // 按ESC键关闭模态框
        document.addEventListener('keydown', function(e) {
          if (e.key === 'Escape' && modal.classList.contains('active')) {
            closeModal();
          }
        });
        
        // 表单提交处理
        trialForm.addEventListener('submit', function(e) {
          e.preventDefault();
          
          // 模拟表单提交
          const submitButton = this.querySelector('.btn-submit');
          const originalText = submitButton.innerHTML;
          
          // 显示加载状态
          submitButton.disabled = true;
          submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
          
          // 模拟异步提交
          setTimeout(function() {
            // 这里应该是实际的表单提交代码
            console.log('表单提交成功');
            
            // 显示成功提示
            alert('您的免费试算申请已提交成功，我们将尽快与您联系！');
            
            // 重置表单
            trialForm.reset();
            
            // 关闭模态框
            closeModal();
            
            // 恢复按钮状态
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
          }, 1500);
        });
        
        console.log('免费试算模态框功能初始化完成');
      }
    });
  </script>
  
  <!-- 应用主脚本，移到body末尾确保DOM完全加载 -->
  <script src="js/app.js"></script>

</body>
</html>